<template>
    <el-dialog
        class="dialog"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogCloseBefore"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="上级代理商:" prop="agent_psn_show" v-if="isEdit" >
                <uxInputTree
                    v-model="formData.agent_psn_show"
                    :selectParams="selectParams"
                    :treeParams="treeParams"
                    :treeData="treeData"
                    :disabled="isEdit"
                />
            </el-form-item>
            <el-form-item label="代理商名称:" prop="agent_name">
                <el-input
                    v-model="formData.agent_name"
                    clearable
                    maxlength="10"
                    placeholder="请输入代理商名称"
                ></el-input>
            </el-form-item>


            <el-form-item label="联系人:" prop="agent_lxr">
                <el-input
                    v-model="formData.agent_lxr"
                    placeholder="请输入联系人"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="agent_tel">
                <el-input
                    v-model="formData.agent_tel"
                    placeholder="请输入联系电话"
                ></el-input>
            </el-form-item>

            <el-form-item label="登录帐号:" prop="agent_username"  v-if="!isEdit" >
                <el-input
                    v-model="formData.agent_username"
                    placeholder="请输入登录帐号"
                ></el-input>
            </el-form-item>
            <el-form-item label="登录密码:" prop="agent_password"  v-if="!isEdit" >
                <el-input
                    v-model="formData.agent_password"
                    placeholder="请输入登录密码"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Getter, Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import uxInputTree from "@/components/input/tree";
@Component({
    name: "agentEdit",
    mixins: [mixinDialogForm],
    components: { uxInputTree }
})
export default class agentEdit extends Vue {
    @Action("purviewAgent/add") itemAdd: any;
    @Action("purviewAgent/edit") itemEdit: any;
    @Getter("purviewAgent/all") treeData: any;


    editInit(data: any) {
        const me = this as any;
        data.agent_tel = data.agent_tel.toString();
        data.agent_psn_show = data.agent_psn || "-1";
        me.formData = Object.assign({}, me.formData, data);
    }
    selectItem!: any;
    addInit() {
        if (this.selectItem) {
            console.log(this.selectItem);
            this.formData.agent_psn_show = this.selectItem.agent_sn;
        }
    }
    selectParams: object = {
        clearable: true,
        placeholder: "请选择上级代理商"
    };

    formData: any = {
        agent_psn_show: "",
        agent_psn: "",
        agent_name: "",
        agent_lxr: "",
        agent_tel: "",
        agent_username: "",
        agent_password: ""

    };

    @Watch("formData.agent_psn_show", { immediate: true })
    updateAgentPsn(v: any = {}) {
        if (v == "-1") {
            v = "";
        }
        this.formData.agent_psn = v;
    }
    // 表单验证
    rules: any = {
        agent_psn_show: [
            {
                required: true,
                message: "请选择上级代理商"
            }
        ],
        agent_name: [
            {
                required: true,
                message: "请输入代理商名称"
            }
        ],
        agent_lxr: [
            {
                required: true,
                message: "请选择代理商类型"
            }
        ],
        agent_tel: [
            {
                required: true,
                message: "请选择作用范围"
            }
        ],
        agent_username: [
            {
                required: true,
                message: "请输入登录帐号"
            }
        ],
        agent_password: [
            {
                required: true,
                message: "请输入登录密码"
            }
        ]
    };
    // 标题
    get title() {
        return (this as any).isEdit ? "编辑代理商" : "新增代理商";
    }

    treeParams: any = {
        clickParent: true,
        props: {
            children: "children",
            label: "agent_name",
            value: "agent_sn"
        }
    };

    onDialogCloseBefore() {
        const me = this as any;
        me.selectItem = null;
        me.onDialogClose()
    }
}
</script>